<template>
  <div class="widget-table" :style="stylesConfig">
    <!-- 动态表格 -->
    <dv-scroll-board
      :config="config"
      @mouseover="mouseoverHandler"
      @click="clickHandler"
    />
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, toRef, computed, onMounted } from 'vue';
import { getComponentShowListApi } from '@/views/design-center/api/screen';
const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

// 样式配置
const stylesConfig = computed(() => {
  return {
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    position: preview.value ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`
  };
});
const dynamicData = ref(null); //动态数据初始值

let timer = null;
const { value } = toRefs(props);
const { setups, styles } = toRefs(props.value);

const preview = toRef(props, 'preview');
// console.log('setups---------表格', setups.value);

// 是否关联了数据集
const isConfigDataSets = computed(() => {
  return !!setups.value.associatedDatasets.id;
});

/**
 * @description:获取试图的动态数据
 * @param {对象} value查询参数
 * @return {*}
 */
const getDynamicData = async (value = {}) => {
  let res = await getComponentShowListApi({
    dataSetId: setups.value?.associatedDatasets?.id
  });
  dynamicData.value = res.data;
  console.log('报表的数据-------------', res);
};

/**
 * @description:获取服务端数据数据
 * @return {*}
 */
const refreshData = () => {
  console.log('isConfigDataSets-------',isConfigDataSets.value)
  if (preview.value && isConfigDataSets.value) {
    //初始化的时候先请求一次,然后再按照定时请求请求
    getDynamicData();
    timer = setInterval(() => {
      getDynamicData();
    }, 50000);
  } else {
    // updateEchart(getOption());
  }
};
const mockData = {
  header: ['列1', '列2', '列3'],
  data: [
    ['行1列1', '行1列2', '行1列3'],
    ['行2列1', '行2列2', '行2列3'],
    ['行3列1', '行3列2', '行3列3'],
    ['行4列1', '行4列2', '行4列3'],
    ['行5列1', '行5列2', '行5列3'],
    ['行6列1', '行6列2', '行6列3'],
    ['行7列1', '行7列2', '行7列3'],
    ['行8列1', '行8列2', '行8列3'],
    ['行9列1', '行9列2', '行9列3'],
    ['行10列1', '行10列2', '行10列3']
  ],
  index: true,
  columnWidth: [50],
  align: ['center']
};

const config = computed(() => {
  let header =
    (Array.isArray(setups.value?.barChartValue) &&
      !!setups.value?.barChartValue.length &&
      setups.value?.barChartValue?.map((item) => item.label)) ||
    mockData.header;

  return {
    header,
    data:
      dynamicData.value?.map((item) => {
        return setups.value.barChartValue.map((el) => item[el.value]);
      }) || mockData.data,
    // header:mockData.header,
    // data:mockData.data,
    index: true,
    columnWidth: [50],
    align: ['center']
  };
});
const mouseoverHandler = (e) => {
  console.log(e);
};

const clickHandler = (e) => {
  console.log(e);
};

onMounted(async () => {
  refreshData();
});
</script>
<style scoped lang="scss"></style>
